<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content {
      width: 300px;
      height: 100px;
      border: 1px solid red;
      text-align: center;
    }
    .active {
      color: red;
    }
    .disabled {
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <div id="app">
    <div>
      <table border="1">
        <thead>
          <tr>
            <th colspan="3">购物车</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>商品名称</td>
            <td>商品数量</td>
            <td>商品价格</td>
          </tr>
          <tr v-for="(phone,index) in goodsList">
            <td>{{phone.name}}</td>
            <td><input type="text" v-model.number="phone.num"></td>
            <!-- <td>{{phone.num}}</td> -->
            <td>{{phone.price}}</td>
          </tr>
          <tr>
            <td>小结</td>
            <td>{{totalNum()}}件</td>
            <td>{{totalPrice()}}元</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="page">
      <div class="content">第{{currentPage}}页</div>
      <button
        :disabled="currentPage == 1"
        @click="pre"
        :class="{disabled:currentPage == 1}"
      >上一页</button>
      <button
        v-for="num in 5"
        @click="changePage(num)"
        :class="{active: currentPage == num}"
      >{{num}}</button>
      <button
        :disabled="currentPage == 5"
        @click="next"
        :class="{disabled:currentPage == 5}"
      >下一页</button>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        // 当前页码
        currentPage: 1,
        // 购物车的数据
        goodsList: [
          {name:'iphone 12', price: 5999, num: 10},
          {name:'mi 11', price: 3999, num: 15},
          {name:'huawei P40', price: 4999, num: 50},
          {name:'1+ 7t', price: 4599, num: 8},
        ]
      },
      beforeCreate() {
        console.log(1,'beforeCreate');
        console.log(this.$el);
        console.log(this.$data);
        console.log(1,'beforeCreate');
      },
      created() {
        console.log(2,'created');
        console.log(this.$el);
        console.log(this.$data);
        console.log(2,'created');
      },
      beforeMount() {
        console.log(3,'beforeMount');
        console.log(this.$el);
        console.log(this.$data);
        console.log(3,'beforeMount');
      },
      mounted() {
        console.log(4,'mounted');
        console.log(this.$el);
        console.log(this.$data);
        console.log(4,'mounted');
      },
      beforeUpdate() {
        console.log(5,'beforeUpdate');
        console.log(this.$el);
        console.log(this.$data);
        console.log(5,'beforeUpdate');
      },
      updated() {
        console.log(6,'updated');
        console.log(this.$el);
        console.log(this.$data);
        console.log(6,'updated');
      },
      beforeDestroy() {
        console.log(7,'beforeDestroy');
        console.log(this.$el);
        console.log(this.$data);
        console.log(7,'beforeDestroy');
      },
      destroyed() {
        console.log(8,'destroyed');
        console.log(this.$el);
        console.log(this.$data);
        console.log(8,'destroyed');
      },
      methods: {
        changePage(num) {
          this.currentPage = num;
        },
        pre() {
          if(this.currentPage>1) {
            this.currentPage --;
          }
        },
        next() {
          if(this.currentPage<5) {
            this.currentPage ++;
          }
        },
        // 计算总数量
        totalNum() {
          let num = 0;
          // 累加各个商品的数量
          this.goodsList.forEach(item => {
            num += Number(item.num)
          });
          return num
        },
        // 计算总价格
        totalPrice() {
          let num = 0;
          // 累加各个商品的数量*商品的价格
          this.goodsList.forEach(item => {
            num += item.num * item.price
          });
          return num
        }
      },
    })
  </script>
</body>
</html>